<template>
  <div class="app-container">
    <avue-crud
      ref="crud"
      :option="option"
      :data="data"
      :table-loading="loading"
      @on-load="onLoad"
      @row-save="rowSave"
      @row-update="rowUpdate"
      @row-del="rowDel"
      :before-open="beforeOpen"
      @search-change="searchChange"
      @search-reset="resetChange"
    >
      <template
        slot="icon"
        slot-scope="scope"
      >
        <div>
          <svg-icon :icon-class="scope.row.icon || '404'"></svg-icon>
        </div>
      </template>
    </avue-crud>
  </div>
</template>

<script>
import { addRes, getRes, upRes, delRes, getResTree } from '@/api/user.js'
export default {
  data() {
    return {
      form: {},
      loading: false,
      data: [],
      /* 分页 */
      page: {
        pageSize: 10,
        currentPage: 1,
        total: 0,
        background: false,
      },
      option: {
        headerAlign: 'center',
        align: 'center',
        border: true,
        index: true,
        indexLabel: '序号',
        indexWidth: 100,
        card: true,
        defaultExpandAll: true,
        dialogDrag: false,
        menuWidth: 200,
        searchMenuSpan: 4,
        searchSpan: 6,
        searchLabelWidth: '25%',
        column: [
          {
            label: '资源名称',
            prop: 'resVal',
            align: 'left',
            width: 200,
            search: true,
          },
          {
            label: '上级菜单',
            prop: 'resPid',
            type: 'tree',
            defaultExpandAll: true,
            expandOnClickNode: false,
            dicData: [
              {
                resVal: '全部',
                id: 'R',
                children: [],
              },
            ],
            props: {
              label: 'resVal',
              value: 'id',
            },
            rules: [
              {
                required: false,
                message: '请选择上级菜单',
                trigger: 'click',
              },
            ],
            hide: true,
          },
          {
            label: '资源编号',
            prop: 'resCode',
            width: 150,
          },
          {
            label: '资源类型',
            prop: 'resType',
            type: 'select',
            width: 100,
            dicData: [
              {
                label: '节点',
                value: 'N',
              },
              {
                label: '菜单',
                value: 'M',
              },
              {
                label: '按钮',
                value: 'B',
              },
            ],
          },
          {
            label: '资源排序',
            prop: 'resOrder',
            width: 90,
            type: 'number',
            value: 0,
          },
          {
            label: '是否启用',
            prop: 'resIsvalid',
            type: 'select',
            width: 100,
            value: true,
            dicData: [
              {
                label: '启用',
                value: true,
              },
              {
                label: '禁用',
                value: false,
              },
            ],
          },
          {
            label: '创建时间',
            prop: 'createTime',
            width: 200,
            display: false,
          },
          {
            label: '更新时间',
            prop: 'updateTime',
            width: 200,
            display: false,
          },
          {
            label: '资源路径',
            prop: 'path',
            width: 200,
            rules: [
              {
                required: true,
                message: '请输入资源路径',
              },
            ],
          },
          {
            label: '组件路径',
            prop: 'component',
            width: 200,
            rules: [
              {
                required: true,
                message: '请输入组件路径',
              },
            ],
          },
          {
            label: '备注',
            prop: 'resDesc',
            type: 'textarea',
            span: 24,
            width: 200,
            overHidden: true,
          },
        ],
      },
    }
  },
  methods: {
    onLoad(page, params = {}) {
      if (page.layout) {
        Object.assign(params, {
          page: 1,
          size: 10,
        })
      } else {
        Object.assign(params, page)
      }
      this.loading = true
      /* if (page.text) {
                    Object.assign(params, page);
                } */
      getRes(params).then((data) => {
        this.loading = false
        this.data = data.data.records
      })
    },
    /* 清空 */
    resetChange() {
      this.onLoad({
        text: '',
      })
    },
    /* 搜索筛选 */
    searchChange(params, done) {
      this.onLoad({
        text: params.resVal,
      })
      done()
    },
    /* 新增 */
    rowSave(row, done, loading) {
      delete row.createTime
      delete row.updateTime
      addRes(row).then(
        (data) => {
          if (data.status) {
            this.onLoad({})
            this.$message({
              type: 'success',
              message: '操作成功!',
            })
            done()
          } else {
            this.$message.error('系统错误,请稍候再试!')
            loading()
          }
        },
        (error) => {
          window.console.log(error)
          loading()
        }
      )
    },
    /* 修改 */
    rowUpdate(row, index, done, loading) {
      delete row.createTime
      delete row.updateTime
      upRes(row).then(
        () => {
          done()
          this.onLoad({})
          this.$message({
            type: 'success',
            message: '操作成功!',
          })
        },
        (error) => {
          window.console.log(error)
          loading()
        }
      )
    },
    /* 删除 */
    rowDel(row) {
      this.$confirm('确定将选择数据删除?', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      }).then(() => {
        delRes({
          id: row.id,
        }).then(() => {
          this.onLoad()
          this.$message({
            type: 'success',
            message: '操作成功!',
          })
        })
      })
    },
    /* 打开弹窗前回调 */
    beforeOpen(done, type) {
      if (['edit', 'add'].includes(type)) {
        getResTree().then((data) => {
          if (data.status) {
            let i = this.findArray(this.option.column, 'resPid', 'prop')
            if (i > -1) {
              this.option.column[i].dicData[0].children = data.data.records
            }
          } else {
            this.$message.error('系统错误,请稍候再试!')
          }
        })
      }
      done()
    },
  },
}
</script>

<style scoped="scoped" lang="scss">
/deep/ .avue-crud__pagination {
  text-align: center;
}
/deep/ .el-card.is-always-shadow,
.el-card.is-hover-shadow:focus,
.el-card.is-hover-shadow:hover {
  box-shadow: none;
}
/deep/ .el-card {
  border: none;
}
</style>